<template>
  <div class="home">
    <div class="main">
      <mango-qr-code
        :mmangoo="10086"
        @truoble="mmangoo()"
        :width="240"
        :height="240"
        :Url="url"
        v-if="imgReload"
      >
        <div class="desc" slot="description">扫码关注我的微博↑</div>
      </mango-qr-code>
      <div class="main_router">
        <div @click="showMessage" style="color: red" class="main_router_item">
          博客-->
        </div>
        <div @click="toZhiHu" class="main_router_item">知乎--></div>
        <div @click="toGitee" class="main_router_item">GitEE码云--></div>
        <div @click="toTianao" class="main_router_item">祖传天刀仿写--></div>
        <div @click="toXyq" class="main_router_item">梦幻西游转区查询--></div>
        <div @click="toThink" class="main_router_item">
          上传学习(ThinksJs真香)-->
        </div>
        <div @click="toWriter" class="main_router_item">二维码绘制--></div>
        <div @click="toUpload" class="main_router_item">
          上传学习<br />(obs+nodejs(express)+mysql)-->
        </div>
        <div @click="toImage" class="main_router_item">
          图片压缩<br />(nodejs(express)+npm-images)-->
        </div>
        <div class="main_router_item item_base"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {},
  data() {
    return {
      qrCodeSrc: '',
      phone: '',
      url: '//weibo.com/MMangooLuo',
      text: '',
      message: '这里用于测试是否jq可以全局使用',
      imgReload: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    toUpload() {
      this.$router.push('uploadStudy')
    },
    mmangoo() {
      this.$router.push('uploadStudy')
    },
    toTianao() {
      window.open('http://47.100.59.18/tiandao/')
    },
    toGitee() {
      window.open('https://gitee.com/MMangoo')
    },
    toThink() {
      this.$router.push('thinkStudy')
    },
    toXyq() {
      this.$router.push('xyqSearch')
    },
    toImage() {
      this.$router.push('Image')
    },
    toWriter() {
      this.$router.push('writer')
    },
    toZhiHu() {
      this.$alert('全是DOTA跟喷人', '少侠还是要去看嘛', {
        confirmButtonText: '仍然访问',
        callback: (action) => {
          window.open('https://zhihu.com/people/MMangoo')
        }
      })
    },
    showMessage() {
      this.$alert('正在打dota中', '没空', {
        confirmButtonText: '确定',
        callback: (action) => {
          this.$message({
            type: 'success',
            message: `自己搞blog是要了命o(╥﹏╥)o`
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@media screen {
  @media (max-width: 700px) {
    .home {
      width: 100%;
      height: 100%;
      padding-top: 100px;
    }
    .main {
      width: 90%;
      margin: auto;
      text-align: center;
      .qr_code {
        text-align: center;
        .desc {
          margin: 20px;
        }
      }
    }
    .main_router {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px;
      height: 40px;
      line-height: 40px;
      width: 100%;
      .main_router_item {
        cursor: pointer;
      }
    }
  }
  @media (min-width: 700px) {
    .home {
      width: 100%;
      height: 100%;
      padding-top: 100px;
    }
    .main {
      width: 800px;
      margin: auto;
      text-align: center;
      .qr_code {
        text-align: center;
        .desc {
          margin: 20px;
        }
      }
    }
    .main_router {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      width: 100%;
      flex-wrap: wrap;
      .main_router_item {
        margin-bottom: 20px;
        width: 30%;
        cursor: pointer;
      }
    }
  }
}
</style>
